<template>
  <!-- 检验确认 -->
  <el-dialog title="检验确认" :visible="value" width="700px" custom-class="dialog-box" @close="onClose" @open="onOpen" :close-on-click-modal="false" :append-to-body="true">
    <div v-for="(item,index) in dataArr" :key="index" class="form-tool">
      <div :class="toClass(item)">
          <el-checkbox v-model="item.check" @change="handleCheckAllCode($event,item)" style="margin-right:5px;">
            <span>
              {{item.sample|changeAssist(sampleEnum)}}
              {{item.sampleCapacity}}
              {{item.sampleUnit|changeAssist(unitEnum)}}
              {{item.container|changeAssist(vesselEnum)}}
              {{item.containerColor|changeAssist(vesselColorEnum)}}
            </span>
            <el-link v-if="curItem.status==4" @click="onCancel(item)" :underline="false" class="check-cancel">取消</el-link>
          </el-checkbox>
        </div>
        <div class="item-right">
           <el-checkbox-group v-model="item.checkChild" @change="handleCheckedCodeChange($event,item)">
              <div v-for="(item2,index2) in item.child" :key="index2" class="item-box">
                  <el-checkbox class="check-affirm-box" :disabled="curItem.status == 0 ? false:true" :label="item2.id" :key="item2.id"> {{item2.name}}</el-checkbox>
              </div>
           </el-checkbox-group>
        </div>
    </div>
    <span slot="footer">
      <el-button v-if="!curItem || curItem.status==4" type="primary" @click="onSign">补打标签</el-button>
      <el-button v-else type="primary" :loading="btnLoading" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: ["value", "curItem"],
  data() {
    return {
      btnLoading: false,
      dataArr: [],
      sampleEnum: [],
      reportUnitEnum: [],
      unitEnum: [],
      vesselEnum: [],
      vesselColorEnum: []
    };
  },
  mounted() {
    const th = this;
    th.getCommonConfigByKey("实验室样本名称").then(res => {
      th.sampleEnum = res;
    });
    th.getCommonConfigByKey("报告单位").then(res => {
      th.reportUnitEnum = res;
    });
    th.getCommonConfigByKey("单位").then(res => {
      th.unitEnum = res;
    });
    th.getCommonConfigByKey("实验室容器").then(res => {
      th.vesselEnum = res;
    });
    th.getCommonConfigByKey("试管颜色").then(res => {
      th.vesselColorEnum = res;
    });
  },
  methods: {
    //补打标签
    onSign() {
      const th = this;
      let arr = [];
      th.dataArr.forEach(d => {
        if(d.check){
          arr.push(d.id);
        }
      });
      if (arr.length == 0) {
        th.$message.warning("请勾选检查项目");
        return;
      }
      th.$emit("sign", arr);
      th.onClose();
    },
    onSubmit() {
      let th = this;
      let arr = [];
      let curArr = [];
      th.dataArr.forEach(d => {
        if (d.check) {
           /**
             * 新增  2021.03.15 判断是否选择，选择即可增加
             */
          d.checkChild.forEach(d2 => {
           arr.push(d2);
          });
          curArr.push(d);
        }
      });
      if (arr.length == 0) {
        th.$message.warning("请勾选检查项目");
        return;
      }
      let j = {
        ids: arr.join(",")
      };
      th.btnLoading = true;
      th.$api
        .confirmedCheckcureCheckupIds(j)
        .then(res => {
          if (res.executed) {
            th.$message.success("操作成功");
            th.$emit("success", res.data,1);
            th.onClose();
          } else {
            th.$message.error(res.message);
          }
          th.btnLoading = false;
        })
        .catch(() => {
          th.btnLoading = false;
        });
    },
    getData() {
      let th = this;
      let list = [];
      let j = {
        cureId: th.curItem.cureId,
        status: th.curItem.status
      };
      th.$api.cureCheckupV2preConfirmedCheckcureId(j).then(res => {
        if (res.executed) {
          res.data.forEach(d => {
            d.check = false;
            d.checkChild=[];
          });
          th.dataArr = res.data;
        }
      });
    },
    toClass(obj) {
      let str = [];
      if (obj.containerColor) {
        str = ["check-vesse", "check-color" + obj.containerColor];
      }
      return str;
    },
    onOpen() {
      let th = this;
      th.getData();
      th.$nextTick(function() {});
    },
    onClose() {
      let th = this;
      th.dataArr = [];
      th.$emit("input", false);
    },
    onCancel(obj){
        this.$confirm('是否取消该检验项目，取消后将不再存在', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.cancelCureCheckup({checkupId:obj.id}).then(res=>{
             if(res.executed){
               this.$message.success("取消成功");
               this.$emit("input", false);;
               this.$emit("success");
             }else{
               this.$message.error(res.message);
               this.onClose();
             }
          })
        });
    },
    //单选选择code
    handleCheckedCodeChange(arr,obj){
      obj.check=arr.length>0?true:false;
    },
    //获取当前列全部子类
    handleCheckAllCode(val,obj){
      const childList= obj.child.reduce((prv,cur)=>{
          prv.push(cur.id);
          return prv;
       },[]);
      obj.checkChild=val?childList:[];
    }
  }
};
</script>
<style lang="scss" scoped>
.check-item-tool{
  display: flex;
}
.check-cancel{
  width:40px;
  padding: 0;
  height: 40px;
  line-height: 40px;
  color: #1ab394;
}
.form-tool {
  // border-top: 1px solid #eee;
  flex: 1;
  border-bottom: 1px solid #d6d5d5;
  margin-bottom: 20px;
  align-items: stretch;
  background-color: #fbfafa;
  border-radius: 50px;
  box-shadow: 0px 5px 12px 0 rgba($color: #000000, $alpha: 0.12);
  background: -webkit-linear-gradient(#84adf9, #5673ef);
  background: -o-linear-gradient(#84adf9, #5673ef);
  background: -moz-linear-gradient(#84adf9, #5673ef);
  background: -mos-linear-gradient(#84adf9, #5673ef);
  background: linear-gradient(#fff 10px, #efefef 30px);
  // overflow: hidden;
  // justify-items: stretch;
  > div:nth-child(1) {
    height: inherit;
    display: flex;
    align-items: center;
    padding-left:50px;
    border: 1px solid #eceaea;
    border-right-color: #d8d8d8;
    border-radius: 50px 0 0 50px;
    // width:40%;
    cursor: pointer;
  }
  .item-right {
    width:55%;
    border: 1px solid #eceaea;
    border-left: none;
    border-radius: 0 50px 50px 0;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    .item-box {
      min-height: 35px;
      line-height: 35px;
      padding-left: 15px;
      border-top: 1px solid #eceaea;
    }
    > .item-box:nth-child(1) {
      border-top: none;
    }
  }
}
> div:nth-child(1) {
  border-top: none;
}
.check-vesse {
  position: relative;
  // background-color: #fbfafa;
  border: 1px solid #eceaea;
  &::before {
    content: "";
    display: block;
    width: 40px;
    left: 0;
    top: -5px;
    bottom: -5px;
    position: absolute;
    border-radius: 15px 4px 4px 15px;
    border-right: 3px solid #333;
  }
}
.check-color1 {
  &::before {
    background-color: #d44242;
    border-color: #d44242;
  }
}
.check-color2 {
  &::before {
    background-color: #d998f7;
    border-color: #a258c5;
    background: -webkit-linear-gradient(#d998f7, #b253da);
    background: -o-linear-gradient(#d998f7, #b253da);
    background: -moz-linear-gradient(#d998f7, #b253da);
    background: -mos-linear-gradient(#d998f7, #b253da);
    background: linear-gradient(#d998f7, #b253da);
  }
}
.check-color3 {
  &::before {
    background-color: #7e7e7e;
    border-color: #535353;
    background: -webkit-linear-gradient(#7e7e7e, #646464);
    background: -o-linear-gradient(#7e7e7e, #646464);
    background: -moz-linear-gradient(#7e7e7e, #646464);
    background: -mos-linear-gradient(#7e7e7e, #646464);
    background: linear-gradient(#7e7e7e, #646464);
  }
}
.check-color4 {
  &::before {
    background-color: #84adf9;
    border-color: #5e78f1;
    background: -webkit-linear-gradient(#84adf9, #5673ef);
    background: -o-linear-gradient(#84adf9, #5673ef);
    background: -moz-linear-gradient(#84adf9, #5673ef);
    background: -mos-linear-gradient(#84adf9, #5673ef);
    background: linear-gradient(#84adf9, #5673ef);
  }
}
.check-color5 {
  &::before {
    background-color: #e8eb40;
    border-color: #cabb35;
    background: -webkit-linear-gradient(#e8eb40, #dbc234);
    background: -o-linear-gradient(#e8eb40, #dbc234);
    background: -moz-linear-gradient(#e8eb40, #dbc234);
    background: -mos-linear-gradient(#e8eb40, #dbc234);
    background: linear-gradient(#e8eb40, #dbc234);
  }
}
.check-color6 {
  &::before {
    background-color: #308f35;
  }
}
.check-color7 {
  &::before {
    background-color: #999;
  }
}
.check-color8 {
  &::before {
    background-color: #d39a1f;
  }
}
.check-affirm-box{
  /deep/.el-checkbox__label{
  color: #606266!important;
}
}

</style>

